Ext.namespace('SLM');

	SLM.dwcPanelRemote = function(config){
		var config2 = {}
		
		this.grid = new SLM.DwcGrid();
		this.matrix = new SLM.DwcMatrix({
			title: ''
		});
		
		this.btngrid = {
				id: 'view-dwc-grid'
			,	iconCls: 'icon_events_grid'
			,	text: 'Grid View'
			,	handler: this.navHandler.createDelegate(this, ['grid'])
			,	disabled: true
		};
			
		this.btnmatrix = {
				id: 'view-dwc-matrix'
			,	iconCls: 'icon_events_matrix'
			,	text: 'Matrix View'
			,	handler: this.navHandler.createDelegate(this, ['matrix'])
		};
		
		Ext.apply(config2, config, {
				border: true
			,	height: 400
			,	width: 600
			,	title: 'Species (Grid View)'
			, 	iconCls: 'icon_species'
			,	activeItem: 0
			,	layout:'card'
			,	items: [
					this.grid
				,	this.matrix
			]
		});
		
	SLM.dwcPanelRemote.superclass.constructor.call(this, config2);
};
	Ext.extend(SLM.dwcPanelRemote, Ext.Panel, {
		initLoadMethod:function(){
			this.grid.getBottomToolbar().insert(11, '-');
			this.grid.getBottomToolbar().insert(12, this.btngrid);
			this.grid.getBottomToolbar().insert(13, this.btnmatrix);
			this.matrix.getBottomToolbar().insert(11, '-');
			this.matrix.getBottomToolbar().insert(12, this.btngrid);
			this.matrix.getBottomToolbar().insert(13, this.btnmatrix);
		}
	,	navHandler: function( view ) {
			switch( view ) {
				case 'matrix':
					this.getLayout().setActiveItem(1);
					this.setTitle('Species (Matrix View)');
					Ext.getCmp('view-dwc-grid').enable();
					Ext.getCmp('view-dwc-matrix').disable();
					this.matrix.getStore().reload();
					break;
				case 'grid':
					this.getLayout().setActiveItem(0);
					this.setTitle('Species (Grid View)');
					Ext.getCmp('view-dwc-matrix').enable();
					Ext.getCmp('view-dwc-grid').disable();
					this.grid.getStore().reload();
					break;
			}	
		}	
	});